import { ColumnProps } from 'antd/lib/table';
import { Input, message, Tabs, Form, DatePicker, Table } from 'antd';
import React, { createContext } from 'react';
import { FormComponentProps } from 'antd/lib/form';
import { formItemLayout } from '@/common/layout/form';

const { TabPane } = Tabs;

const ladderPriceColumns: ColumnProps<ladderPriceRecord>[] = [
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
    align: 'center',
    render: text => <Input value={text} />,
  },
  {
    title: '折扣',
    dataIndex: 'discount',
    key: 'discount',
    align: 'center',
    render: text => <Input value={text} />,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    width: '30%',
    render: (_text, record) => (
      <ProductTableContext.Consumer>
        {(table: DiscountOptions) => (
          <span>
            <a
              href="#"
              onClick={e => {
                e.preventDefault();
                table.onLadderPriceDelete(record);
              }}
            >
              删除
            </a>
            &nbsp;&nbsp;&nbsp;
            <a
              href="#"
              onClick={e => {
                e.preventDefault();
                table.onLadderPriceAdd();
              }}
            >
              添加
            </a>
          </span>
        )}
      </ProductTableContext.Consumer>
    ),
  },
];

const fullReducePriceColumns: ColumnProps<fullReducePriceRecord>[] = [
  {
    title: '满',
    dataIndex: 'full',
    key: 'full',
    align: 'center',
    render: text => <Input value={text} />,
  },
  {
    title: '立减',
    dataIndex: 'reduce',
    key: 'reduce',
    align: 'center',
    render: text => <Input value={text} />,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    width: '30%',
    render: () => (
      <span>
        <a href="#">删除</a>
        &nbsp;&nbsp;&nbsp;
        <a href="#">添加</a>
      </span>
    ),
  },
];

interface ladderPriceRecord {
  id: number;
  count: number;
  discount: number;
}

interface fullReducePriceRecord {
  id: number;
  full: number;
  reduce: number;
}

interface DiscountOptionsState {
  ladderPriceDataSource: ladderPriceRecord[];
  fullReducePriceDataSource: fullReducePriceRecord[];
}

const ProductTableContext = createContext<DiscountOptions>({} as DiscountOptions);

let nextLadderPriceId: number = 0;
let nextFullReducePriceId: number = 0;

class DiscountOptions extends React.Component<FormComponentProps, DiscountOptionsState> {
  state: DiscountOptionsState = {
    ladderPriceDataSource: [
      {
        id: nextLadderPriceId,
        count: 0,
        discount: 0,
      },
    ],
    fullReducePriceDataSource: [
      {
        id: nextFullReducePriceId,
        full: 0,
        reduce: 0,
      },
    ],
  };

  onLadderPriceDelete = (record: ladderPriceRecord) => {
    if (this.state.ladderPriceDataSource.length === 1) {
      message.warning('至少保留一种优惠策略');
      return;
    }
    this.setState(prevState => {
      const prevData = prevState.ladderPriceDataSource;
      const index = prevData.indexOf(record);
      return {
        fullReducePriceDataSource: prevState.fullReducePriceDataSource,
        ladderPriceDataSource: [...prevData.slice(0, index), ...prevData.slice(index + 1)],
      };
    });
  };

  onLadderPriceAdd = () => {
    this.setState(prevState => {
      const prevData = prevState.ladderPriceDataSource;
      nextLadderPriceId += 1;
      return {
        fullReducePriceDataSource: prevState.fullReducePriceDataSource,
        ladderPriceDataSource: [
          ...prevData,
          {
            id: nextLadderPriceId,
            count: 0,
            discount: 0,
          },
        ],
      };
    });
  };

  onFullReducePriceDelete = (record: fullReducePriceRecord) => {
    this.setState(prevState => {
      const prevData = prevState.fullReducePriceDataSource;
      const index = prevData.indexOf(record);
      return {
        fullReducePriceDataSource: [...prevData.slice(0, index), ...prevData.slice(index + 1)],
        ladderPriceDataSource: prevState.ladderPriceDataSource,
      };
    });
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Tabs defaultActiveKey="2" size="small">
        <TabPane tab="无优惠" key="0">
          Content of tab 1
        </TabPane>
        <TabPane tab="特惠促销" key="1">
          <Form>
            <Form.Item {...formItemLayout} label="开始时间">
              {getFieldDecorator('startTime')(<DatePicker placeholder="选择开始时间" />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="结束时间">
              {getFieldDecorator('endTime')(<DatePicker placeholder="选择结束时间" />)}
            </Form.Item>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 11 }} label="促销价格">
              {getFieldDecorator('discountPrice')(<Input placeholder="输入促销价格" />)}
            </Form.Item>
          </Form>
        </TabPane>
        <TabPane tab="阶梯价格" key="2">
          <ProductTableContext.Provider value={this}>
            <Table
              rowKey="id"
              dataSource={this.state.ladderPriceDataSource}
              columns={ladderPriceColumns}
              pagination={false}
            />
          </ProductTableContext.Provider>
        </TabPane>
        <TabPane tab="满减价格" key="3">
          <ProductTableContext.Provider value={this}>
            <Table
              rowKey="id"
              dataSource={this.state.fullReducePriceDataSource}
              columns={fullReducePriceColumns}
              pagination={false}
            />
          </ProductTableContext.Provider>
        </TabPane>
      </Tabs>
    );
  }
}

export default Form.create<FormComponentProps>()(DiscountOptions);
